<template>
  <div class="com-container">
    <div class="com-chart" ref="figureType_ref"></div>
  </div>
</template>

<script>
import indexdata from '@/api/data/indexdata'

export default {
  props: ['timecity'],
  watch: {
    timecity: {
      async handler (newVal) {
        await this.timeCityChart()
      },
      deep: true
    }
  },
  data () {
    return {
      chartInstance: null,//图标实例
      allData: null,//图表数据
      size: null,//大小
    }
  },
  mounted () {
    this.initChart()
    this.getData()
    //增加屏幕大小变化监听的事件
    window.addEventListener('resize', this.screenAdapter)

  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    async timeCityChart () {
      const timeCity = {}
      timeCity.startYear = this.timecity.startYear + '-01-01'
      timeCity.endYear = this.timecity.endYear + '-01-01'
      timeCity.city = this.timecity.city
      const res = await indexdata.getFigureTypesByTimeCity(timeCity)
      const showData = res.data.figureTypes
      if (typeof showData === 'undefined') {
        await this.getData()
        return
      }
      this.allData = showData
      this.updateChart()
    },
    async initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.figureType_ref, 'dark')
      const initOption = {
        title: {
          left: 0,
          top: 10
        }
      }
      this.chartInstance.setOption(initOption)
    },
    async getData () {
      const res = await indexdata.getFigureTypes()
      this.allData = res.data.figureTypes
      this.updateChart()
    },
    updateChart () {
      const centerArr = [
        ['20%', '20%'],
        ['40%', '20%'],
        ['60%', '20%'],
        ['80%', '20%'],
        ['30%', '50%'],
        ['50%', '50%'],
        ['70%', '50%'],
        ['40%', '80%'],
        ['60%', '80%']
      ]
      const showData = this.allData
      const seriesArr = showData.map((item, index) => {
        return {
          type: 'pie',
          center: centerArr[index],
          //关闭鼠标移入动画
          hoverAnimation: false,
          labelLine: {
            show: false//隐藏指示线
          },
          label: {
            show: true,
            top:'10',
            left: 10,
            position: 'center',
            color:'#fff',
            align:'center',
          },
          emphasis: {
            label: {
              show: true,
              fontWeight: 'bold'
            }
          },
          data: [
            {
              name: item.types + '\n' + item.numbers + '人',
              value: item.numbers
            },
            {
              value: item.numbers + '人'
            }
          ]
        }
      })
      let titleText = '历史人物类型'
      if (this.timecity && this.timecity.city && this.timecity !== '') {
        titleText = '历史人物类型' +'\n\n'+ this.timecity.city
      }
      const dataOption = {
        title: {
          text: titleText,
        },
        legend: {
          bottom: 10,
          left: 10,
        },
        tooltip: {
          trigger: 'item'
        },
        series: seriesArr
      }
      this.chartInstance.setOption(dataOption)
      this.screenAdapter()
    },
    screenAdapter () {
      this.size = (this.$refs.figureType_ref.offsetWidth / 100) * 3.6
      const adaptSeries = []
      for (let i = 0; i < this.allData.length; i++) {
        adaptSeries.push({
          type: 'pie',
          label: {
            fontSize: this.size / 2.5
          },
          emphasis: {
            label: {
              fontSize: this.size / 1.5,
            }
          },
          radius: [this.size * 1.5, this.size]
        })
      }

      const adaptOption = {
        title: {
          textStyle: {
            fontSize: this.size / 1.7
          }
        },
        legend: {
          itemHeight:this.size/2.5,
          itemWidth:this.size,
          itemGap:this.size/10,
          textStyle: {
            fontSize:this.size/3.5
          }
        },
        series: adaptSeries
      }
      this.chartInstance.setOption(adaptOption)
      this.chartInstance.resize()
    }
  },
}
</script>

<style scoped>

</style>
